<template>
	<view>
		<view class="nav" :style="{paddingTop:navigationBarHeight+'rpx',height:navHeight+'rpx'}" @click="jump">
			<view class="nav-address">
				<image src="@/static/icon/home_ic_location.png"></image>
				<text>{{ navbarData || '请选择场馆' }}</text>
				<u-icon name="arrow-right" color="#333" size="26rpx"></u-icon>
			</view>
		</view>
		<view :style="{height:navHeight+'rpx'}"></view>
	</view>
</template>

<script>
	export default {
		name: 'navbar',
		props: {
			navbarData: {
				type: String,
				default: '未知地区'
			}
		},
		data() {
			return {
				navHeight: 100,
				navigationBarHeight: 0,
			};
		},
		created() {
			// #ifdef MP
			let that = this
			let systemInfomations = uni.getSystemInfoSync()
			// 机型适配比例系数
			let scaleFactor = 750 / systemInfomations.windowWidth
			// 当前机型-屏幕高度
			let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx
			// 当前机型-屏幕宽度
			let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx
			// 状态栏高度
			let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx
			let navHeight = 0 //rpx
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// 胶囊高度
			let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx
			// 胶囊宽度
			let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx
			// 胶囊上边界的坐标
			let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx
			// 胶囊右边界的坐标
			let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx
			// 胶囊下边界的坐标
			let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx
			// 胶囊左边界的坐标
			let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx
			
			// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
			this.navHeight = Number(navHeight + statusBarHeight) //头部导航栏总高度
			this.navigationBarHeight = Number(statusBarHeight) //头部导航栏高
			// #endif
		},
		methods: {
			jump() {
				if (!uni.getStorageSync('userId')) {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 500);
					return uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					})
				}
				uni.navigateTo({
					url: '/pages/venue/list'
				})
			}
		}
	};
</script>

<style lang="scss">
	.nav {
		width: 100%;
		border-bottom: 1px solid rgb(223, 223, 223);
		color: #000000;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9;
		background-color: #ffffff;
		display: flex;
		box-sizing: border-box;
		align-items: center;
	}

	.nav-top {
		width: 100%;
	}

	.nav-address {
		display: flex;
		align-items: center;
	}

	.nav-address image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 5rpx;
		margin-left: 20rpx;
	}
</style>